<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.io.*,org.i_plus.model.*,org.i_plus.model.dao.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gift</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
                                          
function clearForm() {
	var inputs = document.getElementsByTagName("input");
	for(var i=0; i<inputs.length; i++) {
		if(inputs[i].type=="text") {
			inputs[i].value="";
		}
	}
}
function checkFile(){
	var f = document.fileForm;
	var re = /\.(jpg|gif)$/i;  //允許的圖片副檔名
	if (!re.test(f.pic.value)) {		
		        alert("只允許上傳JPG或GIF影像檔");		
		    } else {	
		        var img = new Image();	
		        img.onload = checkImage();
		        img.src = f.pic.value;
		    }
}
var ImageSizeLimit = 100000;  //上傳上限，單位:byte
var ImageWidthLimit = 1200;  //圖片寬度上限
var ImageHeightLimit = 1000;  //圖片高度上限

function checkImage() {
//     alert("檔案大小為:"+document.+"bytes");
	    if ( this.width > ImageWidthLimit) {	
	        showMessage('寬度','px',this.width,ImageWidthLimit);	
	    } else if ( this.height > ImageHeightLimit) {
	        showMessage('高度','px',this.height,ImageHeightLimit);	
	    } else if ( this.fileSize > ImageSizeLimit) {	
	        showMessage('檔案大小','kb',this.fileSize/1000,ImageSizeLimit/1000);        	
	    } else {
	       // document.FileForm.submit();
	    }
	}
function showMessage(kind,unit,real,limit) {
	    var msg = "您所選擇的圖片kind為 real unit\n超過了上傳上限 limit unit\n不允許上傳！";
	    alert(msg.replace(/kind/,kind).replace(/unit/g,unit).replace(/real/,real).replace(/limit/,limit));
	}
	
function choose(data){
	$("#giftid").val($(data).find("td").eq(0).text());
	$("#name").val($(data).find("td").eq(1).text());
	$("#pop").val($(data).find("td").eq(3).text());
	$("#gmoney").val($(data).find("td").eq(4).text());
	$("#vip").val($(data).find("td").eq(5).text());
}

function changecolor(data){
	$(data).css("backgroundColor", "#EBFFFF");
}
function outchangecolor(data){
	$(data).css("backgroundColor", "");
}

</script>
</head>
<%@ include file="/menu.jsp" %> 
<body style="background-color: #EEEEEE">
<div >
<form action="<c:url value="/Manage/GiftServlet.controller" />" 
             name="fileForm" method="POST" enctype="multipart/form-data" style="margin: 0 auto ;margin-top:30px;;border-radius:10px 10px;width: 450px;">
<table >

<tr >
         <td>GiftId:</td>
         <td><input type="text"  id="giftid" name="giftid" ></td>
</tr>
<tr>
         <td>Name:</td>
         <td><input type="text"  id="name" name="name" ></td>
</tr>
<tr>
         <td>Pic:</td>
         <td><input type="file"  id="pic" name="pic" value="" onchange="checkFile();"></td>
</tr>
<tr>
         <td>Pop:</td>
         <td><input type="text"  id="pop" name="pop" ></td>
</tr>
<tr>
         <td>GMoney:</td>
         <td><input type="text"  id="gmoney" name="gmoney" ></td>
</tr>
<tr>
         <td>Vip:</td>
         <td><input type="text"  id="vip" name="vip"></td>
</tr>
<tr>
         <td><input type="submit" name="submit" value="insert">
         <input type="submit" name="submit" value="update"></td>
         <td><input type="submit" name="submit" value="delete">
         <input type="submit" name="submit" value="select">
         <input type="button" value="Clear" onclick="clearForm()">
         <a href="<c:url value="/View/SendGiftServlet.controller" />">返回商城</a></td>
</tr>
</table>
</form>

<c:if test="${not empty select}">
          <table style="margin: 0 auto;width: 600px;margin-top:30px">
          <thead>
             <tr>
             <th>GiftId</th>
             <th>Name</th>
             <th>Pic</th>
             <th>Pop</th>
             <th>GMoney</th>
             </tr>
           </thead>
           <tbody>
             <c:forEach var="bean"  items="${select}" varStatus="status">
             <tr onclick="choose(this);" onmouseover="changecolor(this); " onmouseout="outchangecolor(this);">
             <td align="center">${bean.giftid}</td>
             <td align="center">${bean.name}</td>
             <td align="center">        
             <img height='100' width='80'  id="picfrom" src="data:${selectpic[status.index] }">
             </td>
             <td align="center">${bean.pop}</td>
             <td align="center">${bean.gmoney}</td>
             </tr>
             </c:forEach>
           </tbody>  
          </table>
</c:if>
</div>
</body>
</html>